<template>

  <div>
    <a-affix :offset-top="top">
   <div  style="z-index:1;height: 80px;display: flex;justify-content: space-around;">
      <div style="height: 80px;width: 16%;font-size:26px;text-align:center;line-height: 80px;color:black;background-image: url('https://tse3-mm.cn.bing.net/th/id/OIP.zaQlGDx2vbFo7gcwCn1ePQAAAA?w=250&h=180&c=7&o=5&dpr=1.25&pid=1.7');">
        Lovo商城审核系统
      </div>
      <div  style="width:84%;background-color:white;height: 80px;text-align: right;">
        <div style="font-size: 18px;width: 300px;display: flex;justify-content: space-around;float: right;line-height: 80px">
          <div>
            <a-icon type="home" />
            <span>首页</span>
          </div>
          <div>
            <a-icon type="user" />
            <span>用户</span>
          </div>
          <div>
            <a-icon type="poweroff" />
            <router-link  :to="{name:'Login'}">
              <span style="color: #606266">登录</span>
            </router-link>
          </div>
        </div>
      </div>
    </div>
    </a-affix>
    <a-layout>
      <a-layout-sider  width=16%  :style="{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0, background: '#001529' }">
      <div>
        <div style="width: 100%">
        <a-menu
                :default-selected-keys="['1']"
                :default-open-keys="['sub1']"
                mode="inline"
                theme="dark"
                :inline-collapsed="collapsed"
                :open-keys="openKeys"
                @openChange="onOpenChange"
        >
          <a-sub-menu key="sub1">
            <span slot="title"><a-icon type="eye" /><span>审核系统</span></span>
              <a-menu-item key="1"  @click="menu('client')">
                <span>客户审核</span>
              </a-menu-item>
              <a-menu-item key="2"  @click="menu('promotion')">
                <span>促销审核</span>
              </a-menu-item>
              <a-menu-item key="3" @click="menu('purchasePlan')">
                <span>采购审核</span>
              </a-menu-item>
              <a-menu-item key="4"  @click="menu('quotation')">
                <span>报价审核</span>
              </a-menu-item>
              <a-menu-item key="5"@click="menu('supplier_info')">
               <span>供应商审核</span>
              </a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="sub2">
            <span slot="title"><a-icon type="transaction" /><span>结算系统</span></span>
            <a-menu-item key="6" @click="menu('purchase_order')">
              <span>购物结算</span>
            </a-menu-item>
            <a-menu-item key="7" @click="menu('settlement_order')">
              <span>供货结算</span>
            </a-menu-item>
            <a-menu-item key="9" @click="menu('recharge_order')">
              <span>预存款结算</span>
            </a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="sub3">
            <span slot="title"><a-icon type="shopping-cart" /><span>退货系统</span></span>
            <a-menu-item key="10" @click="menu('clientRefundOrder')">
              <span>客户退货</span>
            </a-menu-item>
            <a-menu-item key="11" @click="menu('supplierRefundOrder')">
              <span>平台退货</span>
            </a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="sub4">
            <span slot="title"><a-icon type="mail" /><span>测试</span></span>
            <a-menu-item key="12" @click="menu('employee')">
              测试1
            </a-menu-item>
            <a-menu-item key="13" @click="menu('test')">
              测试2
            </a-menu-item>
          </a-sub-menu>
        </a-menu>
        </div>
      </div>
      </a-layout-sider>
      <a-layout :style="{ marginLeft:'16%',padding:'24px 24px 0px' }">
        <a-layout-content :style="{ background: '#fff',padding: '24px', margin: 0, minHeight: '280px', overflow: 'initial'}">
          <router-view></router-view>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </div>
</template>

<script>

    import Header from '@/components/Header.vue'
    export default {
        name:'Home',
        components:{
            Header
        },
        data() {
            return {
              rootSubmenuKeys:['sub1','sub2','sub3','sub4'],
              openKeys:['sub1']
            };
        },
        methods: {
          menu(s){
              this.$router.push(s)
          },
          onOpenChange(openKeys) {
            const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1);
            if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
              this.openKeys = openKeys;
            } else {
              this.openKeys = latestOpenKey ? [latestOpenKey] : [];
            }
          },

        },
    };
</script>
<style>
  .clear{
    clear: both;
  }
</style>
